extends /_layout/default.pug

block scripts
  if !starter
    // Plugins and scripts required by this view
    script(src='node_modules/@coreui/utils/dist/coreui-utils.js')
    script(src='js/colors.js')

block view
  .fade-in
    .card
      .card-header
        |  Theme colors
      .card-body
        .row
          .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
            .bg-primary.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
            h6 Brand Primary Color
          .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
            .bg-secondary.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
            h6 Brand Secondary Color
          .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
            .bg-success.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
            h6 Brand Success Color
          .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
            .bg-danger.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
            h6 Brand Danger Color
          .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
            .bg-warning.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
            h6 Brand Warning Color
          .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
            .bg-info.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
            h6 Brand Info Color
          .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
            .bg-light.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
            h6 Brand Light Color
          .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
            .bg-dark.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
            h6 Brand Dark Color
    .card
      .card-header
        |  Grays
      .card-body
        .row.mb-3
          .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
            .bg-gray-100.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
            h6 Gray 100 Color
          .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
            .bg-gray-200.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
            h6 Gray 200 Color
          .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
            .bg-gray-300.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
            h6 Gray 300 Color
          .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
            .bg-gray-400.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
            h6 Gray 400 Color
          .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
            .bg-gray-500.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
            h6 Gray 500 Color
          .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
            .bg-gray-600.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
            h6 Gray 600 Color
          .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
            .bg-gray-700.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
            h6 Gray 700 Color
          .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
            .bg-gray-800.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
            h6 Gray 800 Color
          .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
            .bg-gray-900.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
            h6 Gray 900 Color
